/// namespace: EP
//固定居中宽度：1000px
$EP-body_width: 1000px;

/// import 
//@import "_example/component";
//@import "_example/animation";
//@import "_example/common";

/* >>example(EP)*/
/* EP-top-rap*/
.EP-top-rap {
    background-color: #9BD7FB;
    @at-root .EP-top {
        width: $EP-body_width;
        margin: 0px auto;
        height: 60px;
        ul {
            li {
                float: left;
            }
            a {
                display: block;
                font-size: 16px;
                color: #333;
                &:hover {
                    text-decoration: none;
                }
            }
            .it {
                //通用
                padding: 10px 30px;
                text-indent: 1em;
                //分化
                @include compass-icons-collection(#{"S_icons_nav"}, $G_offset-x: 10px, $G_offset-y: 15px, $map-align: 50%);
            }
        }
    }
}

/* EP-main*/
.EP-main {
    width: $EP-body_width;
    //height: 100px;
    background-color: #fff;
    margin: 0px auto;
    //EP-plate
    @at-root .EP-plate {
        .box {
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 1px solid #999;
            float: left;
        }
        .box1 {
            @include compass-singleimg-multistate(#{"ddbox_1"}, $cursor: pointer, $G_offset-x: 50%, $G_offset-y: 12px, $sprite-base-class: ".box");
        }
        .box2 {
            @include compass-singleimg-multistate(#{"ddbox_2"}, $cursor: pointer, $G_offset-x: 50%, $G_offset-y: 12px, $sprite-base-class: ".box");
            width: 280px;
            //height: 77px;
       
        }
        .box3 {
            @include compass-singleimg-multistate(#{"ddbox_3"}, $cursor: pointer, $G_offset-x: 50%, $G_offset-y: 12px, $sprite-base-class: ".box");
            width: 200px;
        }
        .box4 {
            @include compass-singleimg-multistate(#{"ddbox_4"}, $cursor: pointer, $G_offset-x: 50%, $G_offset-y: 12px, $sprite-base-class: ".box");
            width: 150px;
        }
    }
    //EP-tags
    @at-root .EP-tags {
        .it {
            @include sim-inline-block;
        }
    }
    //EP-dogs
    @at-root .EP-dogs{
        
    }
}

/* EP-foot*/
.EP-foot {
    font-size: 14px;
    color: #555;
    background-color: #eaeaea;
    padding: 15px 0px;
    p {
        text-align: center;
        line-height: 20px;
    }
}

/* >>example(EP),end*/